<template>
    <el-dialog class="dialogTotal" :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="cancel">
        <el-form :disabled="isdisabled" class="formTotal" ref="userDetailFrom" :model="addform" label-width="100px"
            label-position="right" :rules="userRules">
            <el-form-item label="日期" prop="activity_date">
                <el-date-picker class="formWidth" value-format="yyyy-MM-dd" v-model="addform.activity_date" type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="活动主题" prop="activity_theme">
                <el-input v-model="addform.activity_theme" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="地点" prop="activity_addr">
                <el-input v-model="addform.activity_addr" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="活动内容" prop="activity_content">
                <el-input v-model="addform.activity_content" type="textarea" :autosize="{ minRows: 3 }" maxlength="1000"
                    show-word-limit class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="参会人员" prop="participate_users_id">
                <el-select v-model="addform.participate_users_id" multiple placeholder="请选择参会人员" class="formWidth"
                    @change="joinChange">
                    <el-option v-for="item in joinOptions" :key="item.id" :label="item.user_name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请假人员" prop="leave_users_id">
                <el-select v-model="addform.leave_users_id" multiple placeholder="请选择请假人员" class="formWidth"
                    @change="leaveChange">
                    <el-option v-for="item in leaveOptions" :key="item.id" :label="item.user_name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="saveUsser" :disabled="isdisabled">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            title: '新增活动',
            dialogFormVisible: false,
            addform: {
                activity_date: '',
                activity_theme: '',
                activity_addr: '',
                activity_content: '',
                participate_users_id: [],
                leave_users_id: []
            },
            joinOptions: [],
            leaveOptions: [],
            userRules: {
                activity_date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
                activity_theme: [{ required: true, message: '请输入活动主题', trigger: 'blur' }],
                activity_addr: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
                activity_content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
                participate_users_id: [{ required: true, message: '请选择参会人员', trigger: 'blur' }],
            },
            isdisabled: false
        }
    },
    methods: {
        joinChange(val) {
            console.log('val', val, this.addform.participate_users_id);

            if (val.length > 0) {
                let newArr = this.leaveOptions.filter(item => !this.addform.participate_users_id.includes(item.id))
                this.leaveOptions = newArr
            } else {
                this.getPerson()
            }
        },
        leaveChange(val) {
            if (val.length > 0) {
                let newArr = this.joinOptions.filter(item => !this.addform.leave_users_id.includes(item.id))
                this.joinOptions = newArr
            } else {
                this.getPerson()
            }
        },
        addNewFirm() {
            this.addform = {
                activity_date: '',
                activity_theme: '',
                activity_addr: '',
                activity_content: '',
                participate_users_id: [],
                leave_users_id: []
            },
                this.title = '新增活动'
            this.dialogFormVisible = true
            this.getPerson()
        },
        saveUsser() {
            this.$refs.userDetailFrom.validate((vail) => {
                if (vail) {
                    if (this.title == '编辑活动') {
                        this.addform.participate_users_id = this.addform.participate_users_id.join(',')
                        this.addform.leave_users_id = this.addform.leave_users_id.join(',')
                        this.$api.editActive(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.getList()
                        }).catch((err) => {
                            this.$message.error(err.message)
                        })

                    } else {
                        this.addform.participate_users_id = this.addform.participate_users_id.join(',')
                        this.addform.leave_users_id = this.addform.leave_users_id.join(',')
                        this.$api.saveActive(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.getList()
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                    }
                }
            })
        },
        cancel() {
            // this.$refs.userDetailFrom.clearValidate()
            this.$refs.userDetailFrom.resetFields()
            this.dialogFormVisible = false
            this.isdisabled = false
        },
        getDetail(id, val) {
            this.title = val
            val == '活动详情' ? this.isdisabled = true : this.isdisabled = false
            this.getPerson()
            this.$api.getActiveDetail(id).then(res => {
                this.addform = res.data
                this.addform.participate_users_id = this.addform.participate_users_id.split(',').map(Number)//将后台返回值变为数组
                const result1 = this.addform.participate_users_id.filter(item =>
                    this.joinOptions.some(obj => obj.id === item)
                );//过滤返回值中已经被删除的人员重新赋值给参会人员
                this.leaveOptions = this.joinOptions.filter(item =>
                    !result1.includes(item.id)
                );//确保请假人员列表展示正确
                if (this.leaveOptions.length > 0 && this.addform.leave_users_id) {
                    this.addform.leave_users_id = this.addform.leave_users_id.split(',').map(Number)
                    const result2 = this.addform.leave_users_id.filter(item =>
                        this.leaveOptions.some(obj => obj.id === item)
                    );
                    this.joinOptions = this.joinOptions.filter(item =>
                        !result2.includes(item.id)
                    );//过滤掉请假人员
                    this.addform.leave_users_id = result2
                } else {
                    this.addform.leave_users_id = []
                }//过滤返回值中已经被删除的人员重新赋值给请假人员
                console.log('result', this.leaveOptions);
                this.addform.participate_users_id = result1
                this.dialogFormVisible = true
            }).catch(err => {
                this.$message.error(err.message)
            })

        },
        getPerson() {
            this.$api.queryCanUserList().then(res => {
                this.joinOptions = res.data
                this.leaveOptions = res.data
            }).catch(err => {
                this.$message.error(err.message)
            })
        }
    },
    mounted() {
        this.getPerson()
    }
}
</script>
<style lang="less" scoped>
.titleL2 {
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.titleL2::before {
    content: '';
    width: 5px;
    height: 20px;
    margin-right: 5px;
    background-color: #409eff;
}

.formWidth {
    width: 300px;
}

.el-form-item {
    padding-left: 40px !important;
    display: flex;
    align-items: center;
}

/deep/.el-form-item__label {
    line-height: 20px !important;
}

/deep/.el-form-item__content {
    margin-left: 20px !important;
}

.uploadDiv {
    width: 120px;
    height: 120px;
    border: 1px dashed #C0C4CC;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;

    i {
        font-size: 25px;
        color: #909399;
    }
}

.uploadDiv:hover {
    border-color: #409eff;

    i {
        color: #409eff;
    }
}

/deep/.el-form-item__content {
    width: 60% !important;
}
</style>
<style>
.el-tooltip__popper {
    width: 200px !important;
}
</style>